<template>
    <div>
        <search
        ref="mysearch"
        @doReset="doReset"
        @doQuery="doRefresh"
        :ruleform="ruleForm"
        >
            <template slot="top">
                <el-form-item label="服务器名称：" prop="name">
                    <el-select v-model="ruleForm.serverId">
                        <el-option value="" label="全部"></el-option>
                        <el-option
                        v-for="(item,index) in serverList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="启动时间：" prop="startTime" class="dateTime">
                    <el-date-picker
                        v-model="ruleForm.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        >
                    </el-date-picker>
                </el-form-item>
            </template>
            <div slot="foot"></div>
        </search>
        <mytable ref="mytable"
            :config="tableconfig"
           >
            <div slot="mytablebody"></div>
            <template v-slot:usedRamPercentage="{ data }">
                <p class="color-red" v-if=" data.usedRamPercentage >= '95%'">{{ data.usedRamPercentage }}</p>
                <p v-else>{{ data.usedRamPercentage }}</p>
            </template>
            <template v-slot:description="{data}">
                <p v-if="data.description == null">-</p>
                <p v-else>{{ data.description }}</p>
            </template>
            <template v-slot:usedDiskSpaceMaxPercentage="{ data }">
              <el-popover
                    placement="left"
                    width="330"
                    trigger="hover"
                    >
                    <el-table :data="data.detail">
                      <el-table-column property="fileSystem" align="center" label="文件系统"></el-table-column>
                      <el-table-column  property="usedDiskSpacePercentage" align="center" label="已用磁盘空间百分比" width="90">
                        <template slot-scope="scope">
                           <p class="color-red" v-if="scope.row.usedDiskSpacePercentage>='95%'">{{ scope.row.usedDiskSpacePercentage }}</p>
                           <p v-else>{{ scope.row.usedDiskSpacePercentage }}</p>
                        </template>
                      </el-table-column>
                      <el-table-column property="mountPoint" align="center" label="挂载点"></el-table-column>
                    </el-table>
                    <p class="type-look color-red" slot="reference" v-if="data.usedDiskSpaceMaxPercentage >= '95%'">{{ data.usedDiskSpaceMaxPercentage }}</p>
                    <p class="type-look" slot="reference" v-else>{{ data.usedDiskSpaceMaxPercentage }}</p>
                  </el-popover>
            </template>
        </mytable>
    </div>
</template>
<script>
import search from '@/components/search.vue';
import mytable from '@/components/table.vue';
import {serveRecordList,queryServerInfoList} from '@/api/serverMonitor'
export default{
    components:{
        search,
        mytable,
    },
    data(){
        return{
            ruleForm:{
                serverId:'',
                startTime:'',
                endTime:'',
                time:[],
                pageNo:1,
                pageSize:20,
            },
            resultType:[
                {
                    name:'未成功',
                    value:1,
                },
                {
                    name:'已成功',
                    value:2,
                },
                {
                    name:'未结果',
                    value:3,
                },
            ],
            serverList:[],
            tableconfig: {
                loading: false,
                isselection: false,
                ispagination: true,
                tabledata: [
                ],
                isindex: true,
                thead: [
                { sort: null, label: "服务器名称",prop: "name", },
                { sort: null, label: "已用内存百分比", prop: "usedRamPercentage",type:'slot' },
                { sort: null, label: "已用磁盘空间最大百分比",prop: "usedDiskSpaceMaxPercentage",type:'slot',width:200},
                { sort: null, label: "启动时间", prop: "startTime" },
                { sort: null, label: "问题描述", prop: "description",type:'slot'},
                ],
                currentpage: 1,
                pagesize: 0,
                total: 0,
            },
        }
    },
    methods:{
        // 重置搜索
        doReset() {
            console.log(Object.keys(this.ruleForm).slice(0, -3), "this.ruleForm");
            Object.keys(this.ruleForm).slice(0, -3).map((x) => {
                this.ruleForm[x] = "";
            });
            this.ruleForm.time = [];
            console.log(this.ruleForm, "this.ruleForm.pageSize");
            // this.$message({
            //     message: "已重置",
            //     type: "success",
            // });
            this.doRefresh();
        },
        // 刷新
        doRefresh() {
            //页码从第一页开始
            this.tableconfig.currentpage = 1;
            this.ruleForm.pageNo = 1;
            //表格回到顶部
            this.$refs.mytable.$emit("handleGoTop");
            this.doQuery();
        },
        async doQuery() {
        // 获取表格
            this.tableconfig.loading = true;
            this.tableconfig.currentpage = this.ruleForm.pageNo;
            this.tableconfig.pagesize = this.ruleForm.pageSize;
            console.log(this.ruleForm.time,'this.ruleForm.timethis.ruleForm.time');
            this.ruleForm.startTime = this.ruleForm.time[0];
            this.ruleForm.endTime = this.ruleForm.time[1];
            let data1 = await serveRecordList(this.ruleForm);
            if (data1.success) {
                this.tableconfig.total = data1.result.total;
                this.tableconfig.tabledata = data1.result.list;
            }
            this.tableconfig.loading = false;
        },
         // 页码数更新
        handleSizeChange(val) {
            this.ruleForm.pageNo = 1;
            this.ruleForm.pageSize = val;
            this.doQuery();
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
        },
        // 当前页码更新
        handleCurrentChange(val) {
            this.ruleForm.pageNo = val;
            console.log(this.ruleForm.pageNo,'this.tableconfig.currentpage');
            this.doQuery();
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
        },
        getDataList(){
            queryServerInfoList().then(res=>{
                if(res.code == 200){
                    this.serverList = res.result;
                }
            })
        },
       
    },
    created(){
        this.doQuery();
        this.getDataList();
        
    },
}
</script>
<style lang="scss" scoped>
    .color-red{
        color: #e51860;
        font-weight: 600;
    }
</style>